<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/include.inc.jsp" %>

<link rel="stylesheet" href="${ctx}/static/controls/zTree/css/zTreeStyle.css" type="text/css"/>
<form method="post" id="customesearchform${index}" action="${ctx}/customsearch/dialogsearch" style="min-height: 500px;">
    <div class="col-xs-12">
        <div class="mtrow">
            <div class="mtcolall">
                <c:forEach items="${listControl}" var="con">
                    <c:if test="${not empty con.controlName}">
                        <label class="mtlabel-auto">${con.controlName}：</label>
                        <c:choose>
                            <c:when test="${con.controlType == 0}">
                                <input type="text" class="mtinput" name="${con.fieldName}"
                                       controltype="${con.controlType}"
                                       value="${con.qcDefault}"/>
                            </c:when>
                            <c:when test="${con.controlType == 1}">
                                <input type="text" class="mtinput" name="${con.fieldName}"
                                       controltype="${con.controlType}"
                                       value="${con.qcDefault}"/>
                            </c:when>

                        </c:choose>
                    </c:if>
                </c:forEach>
                <c:if test="${fn:length(listControl) > 0}">
                    <a class="mtbtn search marginleft dialogsearch${index}" href="#"><i
                            class="mtfa mt-search"></i><span>查询</span></a>
                </c:if>
            </div>
        </div>
        <div class="checkbox"
             style="position: fixed; top: 45px; margin: 0px; padding-left: 12px; background-color: white; z-index: 5; cursor: pointer;">
            <label> <input id="allcheck${index}" type="checkbox">全选
            </label>
        </div>
        <div>
            <ul id="menuTree${index}" class="ztree"></ul>
        </div>
    </div>
    <div class="defaultparam${index}" style="display: none;">${defaultParam}</div>
    <div class="getresultBtn${index}"></div>
    <input type="hidden" class="contentidHid${index}"/>
    <input type="hidden" class="resultHid${index}"/>
</form>
</body>
</html>
<script type="text/javascript" src="${ctx}/static/controls/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${ctx}/static/controls/zTree/js/jquery.ztree.excheck.js"></script>

<script type="text/javascript">

    $(function () {
        var zTree;
        var zNodes = ${data};
        var setting = {
            data: {
                key: {
                    name: "result2"
                },
                simpleData: {
                    enable: true,
                    idKey: "result1",
                    pIdKey: "result11"

                }
            },
            check: {
                enable: true,
                chkStyle: "checkbox",
                chkboxType: {
                    "Y": "s",
                    "N": "s"
                }
            },
            callback: {
                beforeClick: beforeClick,
                onCheck: zTreeOnCheck
            }
        };

        zTree = $.fn.zTree.init($("#menuTree${index}"), setting, zNodes);
        zTree.expandAll(true);

        function beforeClick(treeId, treeNode) {
            $.fn.zTree.getZTreeObj(treeId).checkNode(treeNode, !treeNode.checked, null, true);
            return false;
        }

        function zTreeOnCheck(event, treeId, treeNode) {
            var treeObj = $.fn.zTree.getZTreeObj(treeId);
            var allnodes = treeObj.getNodes();
            var allnodeCount = allnodes.length;
            for (var i = 0; i < allnodes.length; i++) {
                var node = allnodes[i];
                if (node.children) {
                    allnodeCount += node.children.length;
                }
            }

            if (treeObj.getCheckedNodes(true).length == allnodeCount) {
                $("#" + $(".contentidHid${index}").val() + " .allcheck").prop("checked", "true");
            } else {
                $("#" + $(".contentidHid${index}").val() + " .allcheck").removeAttr("checked");
            }
        }

        //返回选择值
        $(".getresultBtn${index}").click(function () {
            var treeObj = $.fn.zTree.getZTreeObj("menuTree${index}");
            var nodes = treeObj.getCheckedNodes(true);
            if (nodes.length == 0) {
                layer.msg("请选择数据", {
                    icon: 3
                });
            } else {
                $(".resultHid${index}").val(JSON.stringify(nodes));
            }
        });

        $(".dialogsearch${index}").click(function () {

            $.ajax({
                type: "POST",
                url: "${ctx}/customsearch/dialogsearch",
                contentType: "application/json",
                data: JSON.stringify({
                    sqlmapId: "${sqlmapId}",
                    searchstringparam: $("#customesearchform${index} .mtcolall :input[controltype='0']").serializeArray(),
                    searchvalueparam: $("#customesearchform${index} .mtcolall :input[controltype='1']").serializeArray(),
                    defaultParam: JSON.parse($("#customesearchform${index} .defaultparam${index}").html())
                }),
                success: function (result) {
                    zNodes = JSON.parse(result);
                    zTree = $.fn.zTree.init($("#menuTree${index}"), setting, zNodes);
                }
            })
        });

        $("#allcheck${index}").on("change", function () {
            if ($(this).is(":checked")) {
                zTree.checkAllNodes(true);
            } else {
                zTree.checkAllNodes(false);
            }
        });
    })
</script>
